<template>
  <div class="default-form-render-wrapper" :key="contentId" :style="{width: view.width + 'px'}">
    <template v-for="component in components">
      <template v-if="component.type === 'component' && component.component !== 'davidTable'
       && component.component !== 'SubTable'">
        <InputDelegateWrapper
          :formRenderHelper="formRenderHelper"
          @fieldValueChange="fieldValueChange"
          :fieldRelations="formRenderHelper.getFieldRelations(component)"
          :auth="formRenderHelper.getMainFieldAuth(component)"
          :notNull="formRenderHelper.getMainFieldNotNull(component)"
          :ref="formRenderHelper.getFeildRefs(component)" :component="component.component"
          :field="formRenderHelper.getFieldDefinition(component)"/>
      </template>
      <template v-if="component.component === 'davidTable'">

      </template>
      <table :style="{width: view.width + 'px'}">
        <colgroup>
          <col v-for="width in component.colWidth" :style="{width: width + 'px'}">
        </colgroup>

        <tr v-for="(tr, row) in component.content" :style="{height: component.rowHeight[row] + 'px'}">
          <td v-for="(td, col) in tr" :style="td.style"
              :colspan="td.colSpan" :rowspan="td.rowSpan">
            <template v-for="tdComponent in td.content.content">
              <el-text v-if="tdComponent.type === 'text'">{{ tdComponent.value }}</el-text>
              <template v-if="tdComponent.type === 'component'">
                <InputDelegateWrapper
                  :formRenderHelper="formRenderHelper"
                  :auth="formRenderHelper.getMainFieldAuth(tdComponent)"
                  :fieldRelations="formRenderHelper.getFieldRelations(tdComponent)"
                  :notNull="formRenderHelper.getMainFieldNotNull(tdComponent)"
                  @fieldValueChange="fieldValueChange" :component="tdComponent.component"
                  :ref="formRenderHelper.getFeildRefs(tdComponent)"
                  :field="formRenderHelper.getFieldDefinition(tdComponent)"/>
              </template>
            </template>
          </td>
        </tr>
      </table>

      <!--      SubTable-->
      <div v-if="component.component === 'SubTable'">
        <div class="sub-table-button-wraper"
             v-show="formRenderHelper.hasAddAuth(component) || formRenderHelper.hasRemoveAuth(component)">
          <el-button type="primary" icon="plus" v-show="formRenderHelper.hasAddAuth(component)"
                     round @click="() => addSubTableRow(component)">添加
          </el-button>
          <el-button icon="delete" round v-show="formRenderHelper.hasRemoveAuth(component)"
                     @click="() => removeSubTableRow(component)">删除
          </el-button>
          <el-button type="warning" icon="delete" v-show="formRenderHelper.hasRemoveAuth(component)"
                     @click="() => clearSubTableRow(component)" round>删除全部
          </el-button>
        </div>

        <FGroupCheck :value="formRenderHelper.getSelectTableKeys(component)">
          <table :style="{width: view.width + 'px'}">
            <colgroup>
              <col :style="{width: 40 + 'px'}" v-show="formRenderHelper.hasRemoveAuth(component)">
              <col v-for="width in component.colWidth" :style="{width: width + 'px'}">
            </colgroup>

            <!--      SubTable  header-->
            <tr v-for="(headerTr, row) in component.header" :style="{height: component.rowHeight[row] + 'px'}">
              <td class="default-form-render-check-column" v-show="formRenderHelper.hasRemoveAuth(component)"
                  :rowspan="component.header.length" v-if="row === 0">
                <FCheckBoxAll/>
              </td>

              <td v-for="td in headerTr" :style="td.style" :colspan="td.colSpan" :rowspan="td.rowSpan">
                <template v-for="tdComponent in td.content">
                  <el-text v-if="tdComponent.type === 'text'">{{ tdComponent.value }}</el-text>
                  <template v-if="tdComponent.type === 'component'">
                    <InputDelegateWrapper
                      :formRenderHelper="formRenderHelper"
                      :notNull="formRenderHelper.getMainFieldNotNull(tdComponent)"
                      :fieldRelations="formRenderHelper.getFieldRelations(tdComponent)"
                      :auth="formRenderHelper.getMainFieldAuth(tdComponent)"
                      @fieldValueChange="fieldValueChange" :component="tdComponent.component"
                      :ref="formRenderHelper.getFeildRefs(tdComponent)"
                      :field="formRenderHelper.getFieldDefinition(tdComponent)"/>
                  </template>
                </template>
              </td>
            </tr>

            <!--      SubTable  body-->
            <template v-for="(item, dataRowIndex) in formRenderHelper.getDetailDataSource(component)">
              <tr v-for="(bodyTr, detailTrRowIndex) in component.body" style="position: relative"
                  :style="{height: component.rowHeight[component.header.length] + 'px'}">
                <td class="default-form-render-check-column" v-show="formRenderHelper.hasRemoveAuth(component)"
                    :rowspan="component.body.length" v-if="detailTrRowIndex === 0">
                  <FCheckBox :checkKey="item.id"/>
                </td>

                <td v-for="(td, tdIndex) in bodyTr" :style="td.style" :colspan="td.colSpan" :rowspan="td.rowSpan">
                  <el-button v-if="tdIndex === 0 && formRenderHelper.isNewRow(item)" circle
                             @click="formRenderHelper.removeSingleSubTableRow(component, item)"
                             type="warning" class="row-remove-button">
                    <remove/>
                  </el-button>

                  <template v-for="tdComponent in td.content">
                    <el-text v-if="tdComponent.type === 'text'">{{ tdComponent.value }}</el-text>
                    <template v-if="tdComponent.type === 'component'">
                      <InputDelegateWrapper
                        :formRenderHelper="formRenderHelper"
                        :auth="formRenderHelper.getSubFieldAuth(tdComponent, item)"
                        :fieldRelations="formRenderHelper.getFieldRelations(tdComponent)"
                        :notNull="formRenderHelper.getSubFieldNotNull(tdComponent, item)"
                        @fieldValueChange="(field) => fieldValueChange(field, item.id)"
                        :component="tdComponent.component" :ref="formRenderHelper.getSubFiedldRefs(tdComponent, item)"
                        :field="formRenderHelper.getFieldDefinition(tdComponent)"/>
                    </template>
                  </template>
                </td>
              </tr>
            </template>


            <!--      SubTable  footer-->
            <tr v-for="(footerTr, row) in component.footer"
                :style="{height: component.rowHeight[component.header.length + component.body.length] + 'px'}">
              <td class="default-form-render-check-column" v-show="formRenderHelper.hasRemoveAuth(component)"
                  :rowspan="component.header.length" v-if="row === 0">
              </td>

              <td v-for="td in footerTr" :style="td.style" :colspan="td.colSpan" :rowspan="td.rowSpan">
                <template v-for="tdComponent in td.content">
                  <el-text v-if="tdComponent.type === 'text'">{{ tdComponent.value }}</el-text>
                  <template v-if="tdComponent.type === 'component'">
                    <InputDelegateWrapper
                      :formRenderHelper="formRenderHelper"
                      :notNull="formRenderHelper.getMainFieldNotNull(tdComponent)"
                      :fieldRelations="formRenderHelper.getFieldRelations(tdComponent)"
                      :auth="formRenderHelper.getMainFieldAuth(tdComponent)"
                      @fieldValueChange="fieldValueChange" :component="tdComponent.component"
                      :ref="formRenderHelper.getFeildRefs(tdComponent)"
                      :field="formRenderHelper.getFieldDefinition(tdComponent)"/>
                  </template>
                </template>
              </td>
            </tr>

          </table>
        </FGroupCheck>
      </div>

    </template>
  </div>
</template>

<script>
import InputDelegate from '@/components/form/FormInputDelegates/InputDelegate.vue';
import {DefaultViewAction, DefaultViewDefinition} from '@/components/form/DefaultFormDefinition';
import {guid} from '@/utils/CommonUtils';
import FGroupCheck from '@/components/FGroupCheck/index.vue';
import FCheckBox from '@/components/FGroupCheck/FCheckBox.vue';
import FCheckBoxAll from '@/components/FGroupCheck/FCheckBoxAll.vue';
import './DefaultFormRender.css';
import FormRenderHelper from '@/components/platwork/FormDetailComponent/DefaultFormDetailComponent/FormRenderHelper';
import InputDelegateWrapper
  from '@/components/platwork/FormDetailComponent/DefaultFormDetailComponent/InputDelegateWrapper/index.vue';

export default {
  name: "DefaultFormRender",
  components: {
    InputDelegate,
    InputDelegateWrapper,
    FGroupCheck,
    FCheckBoxAll,
    FCheckBox
  },
  props: {
    view: {
      type: Object,
      default: () => JSON.parse(JSON.stringify(DefaultViewDefinition)),
    },
    pageAction: {
      type: String,
      default: 'add'
    },
    viewAction: {
      type: Object,
      default: () => DefaultViewAction
    },
    formDefinition: {
      type: Object,
      default: () => {
        return {
          form: {},
          formFields: [],
          subForms: [{
            fields: [],
            subForm: {}
          }],
          formRelationVos: []
        };
      }
    },
    components: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formRenderHelper: new FormRenderHelper(null, null),
      width: '100%',
      contentId: guid(),
      authHelper: undefined,
      authData: undefined,
      formData: {
        id: 'asdc',
        field_0001: '',
        subFormDatas: [{
          formId: 'asdf',
          formDatas: [{
            id: 'asc',
            field_0001: 'asc'
          }],
        }]
      },
    };
  },
  methods: {
    setFormDefinition(formDefinition) {
    },
    setFormData(formData) {
      this.formData = formData;
      this.formRenderHelper = new FormRenderHelper(formData, this.formDefinition, this, this.viewAction, this.pageAction);
      this.formRenderHelper.init();
    },
    clearSubTableRow(component) {
      this.formRenderHelper.clearSubTableRow(component).then(() => {

      });
    },
    removeSubTableRow(component) {
      this.formRenderHelper.removeSubTableRow(component).then(() => {
      });
    },
    addSubTableRow(component) {
      this.formRenderHelper.addSubTableRow(component);
    },
    refresh() {
      this.components.splice(0, 0);
    },
    fieldValueChange(fieldDefinition, dataId) {
      this.formRenderHelper.fieldValueChange(fieldDefinition, dataId);
    },
    getFormData() {
      return this.formRenderHelper.getFormData();
    },
    getFormDataWithCheck() {
      return this.formRenderHelper.getFormDataWithCheck();
    },
  }
};
</script>
